<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="top">
        <img class="bg-top" src="./bg-top.png" alt="bg">
        <p>智慧城市大脑管理大屏</p>
        <img src="./logo.png" alt="logo" class="logo">

        <div class="time-weather">
            <div class="time-box time-box-after">
                <div class="time">14:44:13</div>
                <div class="date">2023-09-01 星期五</div>
            </div>
            <!-- <div class="weather-box">
                <div class="weather">多云转晴</div>
                <div class="temperature">14～24­°C</div>
            </div> -->
            <div class="show-village-list">
                <div class="village-name">切换项目</div>
                <div class="arrows-dowm"></div>

                <!-- <div class="village-list"> -->
                    <picker-view class="picker-village" indicator-style="height: 3.1771vw;" :value="selectTimeValue"
					@change="bindChangeTime">
					    <picker-view-column>
						    <view v-for="item of years" :key="item+'years'">{{item}}年</view>
						    <view v-for="item of years" :key="item+'years'">{{item}}年</view>
						    <view v-for="item of years" :key="item+'years'">{{item}}年</view>
						    <view v-for="item of years" :key="item+'years'">{{item}}年</view>
						    <view v-for="item of years" :key="item+'years'">{{item}}年</view>
					    </picker-view-column>
                    </picker-view>
                <!-- </div> -->
            </div>
        </div>
    </div>
    <div class="nav-data-list">
        <img src="./decorate-left.png" alt="decorate" class="decorate">
        <div class="nav-data-item">
            <div>村委总数</div>
            <div class="blue">345</div>
        </div>
        <div class="nav-data-item">
            <div>月卡用户</div>
            <div class="blue">5789</div>
            <div>
                <div>黑名单：<text class="blue">232</text></div>
                <div>白名单：<text class="blue">5678</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>今日月卡实收(元)</div>
            <div class="orange">289.99</div>
            <div>
                <div>较昨日<text class="green">+33.55%</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>本周月卡实收(元)</div>
            <div class="orange">2687.99</div>
            <div>
                <div>较上周<text class="red">-23.00%</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>本月月卡实收(元)</div>
            <div class="orange">6888.89</div>
            <div>
                <div>较上月<text class="green">+1.55%</text></div>
            </div>
        </div>
        <div class="nav-data-item">
            <div>当前欠款金额(元)</div>
            <div>16888.89</div>
            <div>
                <div>逃费次数：<text class="blue">232</text></div>
                <div>逃费金额：<text class="blue">¥5678.00</text></div>
            </div>
        </div>
        <img src="./decorate-right.png" alt="decorate" class="decorate">
    </div>

    <div class="clll-box">
        <div class="box-title">
            <div class="triangle"></div>
            <div>车辆流量</div>
            <div>查看详情</div>
        </div>
        <div class="box-main">
            <div class="clll-nav-list">
                <div class="clll-nav-item">
                    <img src="./icon-01.png" alt="icon" class="icon">
                    <div class="blue">50</div>
                    <div>今日入场数</div>
                </div>
                <div class="clll-nav-item">
                    <img src="./icon-01.png" alt="icon" class="icon">
                    <div class="blue">785</div>
                    <div>本周入场数</div>
                </div>
                <div class="clll-nav-item">
                    <img src="./icon-01.png" alt="icon" class="icon">
                    <div class="blue">8785</div>
                    <div>本月入场数</div>
                </div>
                <div class="clll-nav-item">
                    <img src="./icon-02.png" alt="icon" class="icon">
                    <div class="orange">2785.12</div>
                    <div>本月实收金额</div>
                </div>
                <div class="clll-nav-item">
                    <img src="./icon-03.png" alt="icon" class="icon">
                    <div class="yellow">8785</div>
                    <div>本月优惠金额</div>
                </div>
            </div>

            <div id="clll-echart"></div>
            <div class="select-time">
                <div>2023年09月</div>
                <div class="arrows-dowm"></div>
            </div>
        </div>
    </div>

    <div class="tsjy-box">
        <div class="box-title">
            <div class="triangle"></div>
            <div>投诉建议</div>
            <div>查看详情</div>
        </div>
        <div class="box-main">
            <div class="main-data-list">
                <div>
                    <div class="orange">25</div>
                    <div>待指派</div>
                </div>
                <div>
                    <div style="color: #DDF7FF;">53</div>
                    <div>跟进中</div>
                </div>
                <div>
                    <div class="blue">329</div>
                    <div>已完成</div>
                </div>
                <div>
                    <div class="yellow">16</div>
                    <div>已逾期</div>
                </div>
            </div>
            <div class="select-time">
                <div>2023年09月</div>
                <div class="arrows-dowm"></div>
            </div>
            <div id="tsjy-echart-left"></div>
            <div id="tsjy-echart-right"></div>
        </div>
    </div>

    <div class="rcgl-box">
        <div class="box-title">
            <div class="triangle"></div>
            <div>投诉建议</div>
            <div>查看详情</div>
        </div>
        <div class="box-main">
            <div class="main-data-list">
                <div>
                    <div class="blue">25</div>
                    <div>今日查处</div>
                </div>
                <div>
                    <div class="blue">53</div>
                    <div>本周查处</div>
                </div>
                <div>
                    <div class="blue">329</div>
                    <div>本月查处</div>
                </div>
            </div>
            <div class="select-time">
                <div>2023年09月</div>
                <div class="arrows-dowm"></div>
            </div>
            <div id="rcgl-echart-left"></div>
            <div id="rcgl-echart-right"></div>
        </div>
    </div>

    <img src="@/static/bg-bottom.png" alt="bottom" class="bottom-img">

    <!-- <div id="main" style="width: 600px;height:400px;"></div> -->

    <script src="./echarts.min.js"></script>
    <script>
        // var myChart = echarts.init(document.getElementById('main'));

        // // 指定图表的配置项和数据
        // var option = {
        //     title: {
        //         text: 'ECharts 入门示例'
        //     },
        //     tooltip: {
        //         trigger: 'axis',
        //         axisPointer: {
        //             type: 'shadow'
        //         },
        //         formatter: function (params) {
        //             // console.log(params)
        //             let html = `
		// 						<div style='width: 100px;height:100px;background:red;'>
								
		// 						</div>
		// 					`
        //             return html
        //         }
        //     },
        //     legend: {
        //         data: ['销量']
        //     },
        //     xAxis: {
        //         data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        //     },
        //     yAxis: {},
        //     series: [
        //         {
        //             name: '销量',
        //             type: 'bar',
        //             data: [5, 20, 36, 10, 10, 20]
        //         }
        //     ]
        // };

        // // 使用刚指定的配置项和数据显示图表。
        // myChart.setOption(option);
    </script>
</body>

</html>